<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="closeDialog">
      <el-form ref="form" :model="form" label-width="100px" :rules="rules">
        <el-form-item label="姓名:" prop="nickname">
          <el-input v-model="form.nickname" />
        </el-form-item>
        <el-form-item label="绑定手机号:" prop="username">
          <el-input v-model="form.username" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => ({})
    },
    disabled: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '添加业务员'
    }
  },
  data() {
    return {
      form: {
        username: '',
        nickname: '',
        remark: ''
      },
      rules: {
        nickname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        username: [
          { required: true, message: '请输入有效手机号码', trigger: 'blur', validator: this._validatePhone },
          { min: 1, max: 11, message: '手机号不能大于11位数', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    dialogData(newVal) {
      this.form.username = newVal.username
      this.form.nickname = newVal.nickname
      this.form.remark = newVal.remark
    }
  },
  methods: {
    confirm() {
      this.$emit('confirm', this.form)
    },
    cancle() {
      this.$emit('cancel')
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    _validatePhone(rule, value, callback) {
      const isPass = /^[1][3,4,5,7,8,9][0-9]{9}$/.test(value)
      if (!isPass) {
        callback(new Error('请输入有效手机号码'))
      } else {
        callback()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
.el-form /deep/ .el-form-item__label {
  white-space: nowrap;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  font-family: Roboto;
}
.el-form /deep/ .el-input__inner {
  width: 278px;
  height: 36px;
}
.el-form /deep/ .el-textarea__inner {
  width: 278px;
  height: 137px;
}
.dialog-footer {
  button{
    &:nth-child(1){
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
    }
  }
}
.el-dialog__wrapper /deep/ .el-dialog{
  min-width: 450px !important;
}
</style>
